<template>
    <div class="put-activity-list">
        <div class="content">
            <div class="add-btn clear-both">
                <div class="search-box">
                    <el-input placeholder="请输入内容" v-model="searchValue">
                        <el-button slot="append" icon="search"></el-button>
                    </el-input>
                </div>
                <el-button class="float-right btn" type="danger"  @click="toSetUp">新建规则</el-button>
            </div>
            <div class="table-div"  v-loading="loadingChoose">
                <el-table
                    :data="tableData"
                    stripe
                    style="width: 100%">
                    <!--<el-table-column prop="date" label="优先级" width="100" :render-header="ActivityIcon"> </el-table-column>-->
                    <el-table-column prop="rule_name" label="规则名称"> </el-table-column>
                    <el-table-column prop="act_name" label="关联活动 "> </el-table-column>
                    <el-table-column prop="plat" label="投放平台 " >  </el-table-column>
                    <el-table-column prop="created_at" label="创建时间 " > </el-table-column>
                    <el-table-column prop="tag" label="状态 " > </el-table-column>
                    <!--<el-table-column prop="address" label="触发行为 " >  </el-table-column>
                    <el-table-column prop="address" label="触发行为" width="150" :render-header="textAction"> </el-table-column>-->
                    <el-table-column prop="" label="操作 " width="120" :render-header="operationAction">
                        <template slot-scope="scope">
                            <el-button style="margin-right:10;"@click="editClick(scope.row)" type="text" size="small">编辑</el-button>
                            <el-button style="margin-left:0;margin-right:10;"@click="deleteClick(scope.row)" type="text" size="small">删除</el-button>  
                            <el-button style="margin-left:0;margin-right:10;" @click="actionClick(scope.row,1)" type="text" size="small" v-show="scope.row.status==2">开始</el-button>
                            <el-button style="margin-left:0;margin-right:10;"@click="actionClick(scope.row,2)" type="text" size="small" v-show="scope.row.status==1">暂停</el-button>  
                        </template>
                    </el-table-column>
                </el-table>
               

                <div class="text-center bg-white" v-show="tableData.length==0">
                    您还没有创建投放规则？<a @click="toSetUp" class="cursor">去创建一个</a>
                </div>
            </div>
            <div class="paging-num text-center">
                <el-pagination
                small
                layout="prev, pager, next"
                :total="total"
                @current-change="pageChange">
                </el-pagination>
            </div>
        </div>  
    </div>
</template>

<script>
	import * as api from './../api/api';
export default {
    data(){
        return {
            searchValue:'', //搜索
            tableData: [],
            loadingChoose:false,  //加载中
            selectListShow:false,
            searchInput:'', //搜索
            current_page:1, //当前页码
            last_page:'',//最后一页
            limit:10, //一页显示多少条
            total:0, //总条数
        }
    },
    mounted(){
        this.fetchList();
    },
    computed: {

    },
    methods: {
        fetchList(){
            let vm = this;
            vm.loadingChoose=true;
            let body={
                search:vm.searchValue,
                limit:vm.limit,
                offset:(parseInt(vm.current_page)-1)*parseInt(vm.limit)
            };
            api.getTriggerList(body).then(res=>{
                vm.loadingChoose=false;
                if(res.data.code==0){
                    res.data.rows.forEach((item,index)=>{
                        let plat=''; 
                        JSON.parse(item.platform).forEach((a,b)=>{
                            if(a==1){
                                plat=plat+' '+'Android'    
                            }else if(a==0){
                                plat=plat+' '+'ios'  
                            }
                        });
                        item.plat=plat;
                        //状态
                        if(item.status==1){
                            item.tag='进行中';
                        }else if(item.status==2){
                            item.tag='已暂停';
                        }else if(new Date(item.begin_time)<new Date()){
                            item.tag='未开始';
                        }else if(new Date(item.end_time)<new Date()){
                            item.tag='已结束';
                        }
                    });
                    vm.tableData=res.data.rows;
                    vm.total=res.data.total;
                }
            }).catch(function (err) {
                vm.loadingChoose=false;
            });
        },
        //点击当前的页数
        pageChange(a){
            this.current_page=a;
            this.fetchList();
        },
        ActivityIcon(h, {column}) {
            return h('span',[
                    h('span', column.label),
                    h('el-tooltip',{
                        attrs:{
                            content:'起个名字，记录APP上您所投放活动的位置',
                            effect:"light",
                            placement:"top-start"
                        }
                    },[
                        h('span',{
                            class:'el-icon-information cursor',
                            style:'margin-left:6px;display:inline-block;color:#999;',
                            
                        })
                    ]),
                    
                ]);
        },
        textAction(h, {column}) {
            return h('span',[
                    h('span', column.label),
                    h('el-tooltip',{
                        attrs:{
                            content:'即用户行为，用来在必要时，给您的技术人员查看',
                            effect:"light",
                            placement:"top-start"
                        }
                    },[
                        h('span',{
                            class:'el-icon-information cursor',
                            style:'margin-left:6px;display:inline-block;color:#999;',
                            
                        })
                    ]),
                    h('span',{
                        style:'display:inline-block;color:#999;font-size:12px;'
                    },['(适用于技术人员)']),
                    
                ]);
        },
        operationAction(h, {column}) {
            return h('span',[
                    h('span', column.label),
                    h('el-tooltip',{
                        attrs:{
                            content:'暂停后该触发规则将不再有效，可以使用开始重新生效；编辑则可供您修改该触发规则；详情可供您查看该触发规则的修改日志；删除，在必要时您可删除该触发规则，但删除时，请谨慎操作',
                            effect:"light",
                            placement:"top-start"
                        }
                    },[
                        h('span',{
                            class:'el-icon-information cursor',
                            style:'margin-left:6px;display:inline-block;color:#999;',
                            
                        })
                    ]),
                    
                ]);
        },
        selectState(){
            this.selectListShow=!this.selectListShow;
        },
        //新建投放
        toSetUp(){
            this.$router.push({name:'triggersCreate'})
        },
        //删除
        deleteClick(a){
            let vm = this;
            
            if(a.status==2){
                api.deleteTrigger({ids:a.id}).then(res=>{
                    if(res.data.code==0){
                        vm.fetchList();
                        vm.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                    }
                })
            }else{
                this.$message({
                    message: '活动还在进行中'
                });
            }
            
        },
        //编辑
        editClick(a){
            if(a.status==2){
                this.$router.push({name:'editTriggers',query:{trgNo:a.id}})
            }else{
                this.$message({
                    message: '活动还在进行中'
                });
            }
            
        },
        //修改投放状态
        actionClick(item,val){
            let vm = this;
            let body={
                id:item.id,
                status:val
            };
            api.editTriggerState(body).then(res=>{
                if(res.data.code==0){
                    vm.$message({
                        message: res.data.message,
                        type: 'success'
                    });
                    vm.fetchList();
                }
            });
        },
    }
    
}
</script>

<style lang="less" scoped>
.put-activity-list{
    height:100%;
    width:100%;
    background:#fff;
    padding:40px;
    box-sizing:border-box;
    overflow-y:auto;
    .content{
        min-width:1020px;
    }
    .table-div{
        position:relative;
        .state-select{
            width:100px;
            position:absolute;
            top:40px;
            right:120px;
            background:#F4F8FB;
            p{
                height:40px;
                line-height:40px;
                padding-left: 18px;
                padding-right: 18px;
                color:#999;
                &:hover{
                    background:#EEF1F6;
                    color:#333;
                }
            }
        }
    }
    
    .add-btn{
        margin-bottom:20px;
        .search-box{
            width:238px;
            display:inline-block;
        }
        .btn{
            border-radius:20px;
            padding: 8px 25px;
        }
    }
    .paging-num{
        margin:20px;
    }
    .bg-white{
        padding:30px 0;
        color:#888;
        a{
            color: #ec5463;
            text-decoration: none;
        }
    }
}
</style>
